<template>
  <a-card>
    <div class="material_reivew_top">
      <div class="material_reivew_top_left">{{ pattern == 4 ? '预警处置' : '处置记录' }}</div>
      <div class="material_reivew_top_return">
        <page-header-wrapper :title="false"></page-header-wrapper>
        <img class="cursor_pointer" src="@/assets/images/accept/back-button.png" alt="返回按钮" @click="backRouter" />
      </div>
    </div>

    <div class="steps-content">
      <!-- 左侧页面 -->
      <div class="steps-content-left">
        <div class="content_left">
          <span class="content_left_title">流程处置</span>
          <a-divider />
          <div class="content_left_flow">
            <a-timeline mode="left" v-if="dealList && dealList.length > 0">
              <a-timeline-item v-for="(deal, index) in dealList" :key="index">
                <a-icon slot="dot" class="content_left_circle"></a-icon>
                <a-collapse expand-icon-position="right" default-active-key="1">
                  <a-collapse-panel key="1" :header="deal.fullname">
                    <div class="content_left_flow_time">{{ deal.exectime ? formateTime(deal.exectime) : '' }}</div>
                    <div class="content_left_flow_content">
                      <a-tooltip placement="topLeft">
                        <template slot="title">
                          <span>{{ deal.record }}</span>
                        </template>
                        <div class="beyond_hiding" :content="deal.record">
                          {{ deal.record }}
                        </div>
                      </a-tooltip>
                    </div>
                    <div class="content_left_flow_fileDiv">
                      <!-- 附件 -->
                      <div v-if="deal.fileids">
                        <Upload :value="deal.fileids" :disabled="true" />
                      </div>
                    </div>
                  </a-collapse-panel>
                </a-collapse>
              </a-timeline-item>
            </a-timeline>
            <a-empty v-else />
          </div>
        </div>
      </div>

      <!-- 右侧页面 -->
      <div class="steps-content-right">
        <div class="content_right">
          <span class="content_right_title">预警信息</span>
          <a-divider />

          <!-- 预警信息 -->
          <div class="content_right_warininfo">
            <div class="content_right_warininfo_list">
              <div class="content_right_warininfo_list_item">姓名：</div>
              <div class="content_right_warininfo_list_item">{{ warnInfo.pername }}</div>
            </div>
            <div class="content_right_warininfo_list">
              <div class="content_right_warininfo_list_item">收到时间：</div>
              <div class="content_right_warininfo_list_item">{{ warnInfo.rectime }}</div>
            </div>
            <div class="content_right_warininfo_list">
              <div class="content_right_warininfo_list_item">地点：</div>
              <div class="content_right_warininfo_list_item">{{ warnInfo.addr }}</div>
            </div>
            <div class="content_right_warininfo_list">
              <div class="content_right_warininfo_list_item">处置类型：</div>
              <div class="content_right_warininfo_list_item">{{ warnInfo.type_text }}</div>
            </div>
            <div class="content_right_warininfo_list" style="height: 100px">
              <div class="content_right_warininfo_list_item">预警图片：</div>
              <div class="content_right_warininfo_list_item">
                <viewer :images="warnInfo.photo">
                  <img class="content_right_warininfo_list_item_img" :src="warnInfo.photo" alt="预警图片" />
                </viewer>
              </div>
            </div>
          </div>

          <!-- 预警详情 -->
          <div>
            <a-table
              :scroll="{ x: 800, y: 550 }"
              :columns="columns"
              :data-source="detailList"
              rowKey="id"
              :pagination="false"
              style="padding: 0px 16px"
            >
              <div slot="rulenameSlot" slot-scope="rulename" class="beyond_hiding" style="width: 100%">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ rulename }}</span>
                  </template>
                  {{ rulename }}
                </a-tooltip>
              </div>

              <div slot="addrSlot" slot-scope="addr" class="beyond_hiding" style="width: 100%">
                <a-tooltip placement="topLeft">
                  <template slot="title">
                    <span>{{ addr }}</span>
                  </template>
                  {{ addr }}
                </a-tooltip>
              </div>

              <div slot="photoSlot" slot-scope="photo" class="beyond_hiding" style="width: 100%">
                
                <viewer :images="photoList">
                  <img  style="width: 200px; height: 100px" :src="photo" alt="预警记录" />
                </viewer>
              </div>

               <!-- 轮播预览效果待完成 -->
               <!-- <div slot="photoSlot"  slot-scope="text, record,index" class="beyond_hiding" style="width: 100%">
                
                <viewer :images="photoList" >
                  <div v-if="xiabiao == index"> 
                    <img  v-for="(item, xiabiao) in photoList"  :src="item" :key="xiabiao"  style="width: 200px; height: 100px" alt="预警记录" >
                  </div>
                </viewer>
              </div>  -->

              <!-- <div slot="photoSlot" slot-scope="text, record, index" class="beyond_hiding" style="width: 100%">
                <viewer :images="photoList">
                  <div>
                    <img v-for="(item, xiabiao) in photoList" 
                        :src="item" 
                        :key="xiabiao" 
                        
                        :style="{ opacity: xiabiao !== index ? '0' : '1', zIndex: xiabiao !== index ? '-99' : '99', width: '200px', height: '100px' }"
                        alt="预警记录">
                  </div>
                </viewer>
              </div> -->

            </a-table>
          </div>
          <a-divider v-show="pattern == 4" />

          <!-- 处置操作区域 -->
          <div v-show="pattern == 4">
            <span class="content_right_title" style="margin-left: 10px">处置信息</span>
            <div>
              <a-upload-dragger
                name="file"
                :accept="acceptFileType"
                :customRequest="(file) => uploadFile(file)"
                :remove="(file) => removeFile(file)"
                :before-upload="(file) => beforeUpload(file)"
                :file-list="draggerFileList"
                :multiple="true"
                class="content_right_drag"
              >
                <div>
                  <p class="ant-upload-drag-icon m-b-0">
                    <!-- <a-icon type="cloud-upload" /> -->
                    <img src="@/assets/images/accept/correct-upload.png" />
                  </p>
                  <p class="ant-upload-hint">您可以将文件拖到此处或点击此处上传</p>
                  <p class="ant-upload-hint">文件格式为 {{ acceptFileType }} 格式</p>
                </div>
              </a-upload-dragger>
            </div>
            <a-textarea
              v-model="workRecord.record"
              class="content_right_textarea"
              placeholder="请输入意见"
              :auto-size="{ minRows: 3, maxRows: 5 }"
            />

            <div class="content_right_option">
              <span style="color: red">*</span><span>类型：</span>
              <a-radio-group v-model="radioVal" @change="radioChange">
                <a-radio :value="Tp_crc_workValue.UNDO"> 待核实 </a-radio>
                <a-radio :value="Tp_crc_workValue.CANCEL"> 系统误报 </a-radio>
                <a-radio :value="Tp_crc_workValue.DONE"> 已核实 </a-radio>
                <!-- <a-radio :value="Tp_crc_workValue.YELLOW">
                  黄色预警
                </a-radio>
                <a-radio :value="Tp_crc_workValue.RED">
                  红色预警
                </a-radio> -->
              </a-radio-group>
            </div>
            <div v-show="pattern == 4">
              <!-- 3:详情模式 4：编辑模式 -->
              <a-button
                type="primary"
                class="btn_primary_color"
                style="float: right; margin-right: 80px; width: 100px; height: 36px"
                @click="complete"
                >完成</a-button
              >
              <a-button
                type="primary"
                class="btn_normal_color"
                style="float: right; margin-right: 20px; width: 100px; height: 36px"
                @click="saveRecord"
                >处置</a-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-card>
</template>

<script>
import storage from 'store'
import { APP_USER } from '@/store/mutation-types.js'
import { minioUpload, minioRemove } from '@/api/base/file'
import { FILETYPE, FILESIZE } from '@/store/mutation-types'
import { Tp_crc_work, Tp_crc_workValue } from '@/enumeration/correction/Tp_crc_work.js'
import { St_workValue } from '@/enumeration/St_work.js'
import { updateWorktype, viewCre_work, complete } from '@/api/correction/cre_work.js'
import { viewCre_warning } from '@/api/correction/cre_warning'
import { queryList, saveCre_work_record } from '@/api/correction/cre_work_record.js'
import { queryListByWarnid } from '@/api/correction/cre_warning_detail.js'
const columns = [
  // 表头配置
  {
    title: '违反规则',
    align: 'left',
    key: 'rulename',
    width: 100,
    dataIndex: 'rulename',
    scopedSlots: { customRender: 'rulenameSlot' },
  },
  {
    title: '时间',
    align: 'left',
    key: 'rectime',
    width: 100,
    dataIndex: 'rectime',
  },
  {
    title: '地点',
    align: 'left',
    key: 'addr',
    width: 200,
    dataIndex: 'addr',
    scopedSlots: { customRender: 'addrSlot' },
  },
  {
    title: '图片',
    align: 'center',
    key: 'photo',
    width: 100,
    dataIndex: 'photo',
    scopedSlots: { customRender: 'photoSlot' },
  },
]
export default {
  data() {
    return {
      photoList: [],// 图片集合
      warnInfo: {}, // 预警信息
      columns: columns, // 表格
      detailList: [], // 表格数据
      currentUser: storage.get(APP_USER), // 登录人信息
      St_workValue: St_workValue, // 社矫预警处置状态
      Tp_crc_workValue: Tp_crc_workValue, // 社矫预警处置类型值
      Tp_crc_work: Tp_crc_work, //  社矫预警处置类型
      workObj: {}, // 预警处置任务
      worktype: null, // 预警处置状态
      but_text: '保存', // 操作按钮的问题
      workRecord: {
        id: undefined,
        record: undefined, // 处置记录
        fileids: undefined, // 处置附件
        userid: undefined, // 记录人
        workid: undefined, // 预警任务id
      },
      // 对应id
      workid: this.$route.params.id, // 路由传入workId
      pattern: this.$route.params.pattern, // 操作类型
      // 子组件处理意见
      dealList: [],
      radioVal: Tp_crc_workValue.CANCEL, // 单选框值
      acceptFileType: FILETYPE, // 文件类型
      draggerFileList: [], // 文件list
    }
  },
  components: {
    Upload: () => import('@/views/base/Upload.vue'),
  },
  created() {
    this.workRecord.userid = this.currentUser.userId
    this.workRecord.workid = this.workid
    this.workRecord.id = this.workid + Date.now()
    this.getWork(this.workid)
    this.queryList()
  },
  methods: {
    // 预警图片查看
    imgView(url) {
      window.open(url)
    },
    // 查询处置记录对象
    async getWork(workid) {
      const { data } = await viewCre_work(workid)
      if (data == null) {
        this.$message.error('未查询到处置记录')
        return
      }
      this.workObj = data || null
      if (this.workObj) {
        this.getWarningInfo(this.workObj.warnid)
        this.queryDateilList(this.workObj.warnid)
      }
    },
    // 查询预警详细记录
    async queryDateilList(warnid) {
      const { data } = await queryListByWarnid(warnid)
      // console.log('queryDateilList', data)
      this.detailList = data || []
      this.detailList.forEach(item =>
        this.photoList.push(item.photo)
      )
    },
    // 查询预警数据
    async getWarningInfo(warnid) {
      const { data } = await viewCre_warning(warnid)
      if (data == null) {
        this.$message.error('未查询到预警信息')
        return
      }
      this.warnInfo = data
    },
    // 查询处置记录列表
    async queryList() {
      this.dealList = []
      const queryParam = {
        f_userid: undefined, // 记录人id
        pageNumber: 1,
        pageSize: 9999,
      }
      // 去除当前的处理人
      // queryParam.f_userid = this.currentUser.userId
      queryParam.f_workid = this.workid
      const { data } = await queryList(queryParam)
      this.dealList = data.records || []
    },
    backRouter() {
      if (this.$route.query.url) {
        if (this.$route.query.tabkey) {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam,
              tabkey: this.$route.query.tabkey,
            },
          })
        } else {
          this.$router.push({
            path: this.$route.query.url,
            query: {
              queryParam: this.$route.query.queryParam,
            },
          })
        }
      } else {
        this.$router.go(-1)
      }
    },
    formateTime(time) {
      return this.$moment(time).format('YYYY年MM月DD日 HH时mm分ss秒')
    },
    // 切换
    radioChange(e) {
      this.radioVal = e.target.value
    },
    // 保存处置记录
    async saveRecord() {
      console.log('workRecord', this.workRecord)
      if (!this.workRecord.record) {
        this.$message.warning('请填写意见')
        return
      }
      // 1 如果选择了状态, 更新预警处置任务状态 (新了处理任务表状态, 同步更新预警信息表状态)
      if (this.radioVal && this.Tp_crc_workValue.UNDO !== this.radioVal) {
        const { code } = await updateWorktype(this.workid, this.workObj.warnid, this.radioVal)
      }
      // 设置文件id
      if (this.draggerFileList && this.draggerFileList.length > 0) {
        const fileIdList = []
        this.draggerFileList.forEach((el) => {
          fileIdList.push(el.uid)
        })
        this.workRecord.fileids = fileIdList.join(',')
      }
      // 2 保存处置意见
      const { code } = await saveCre_work_record(this.workRecord)
      if (code === 0) {
        this.$message.success('保存成功')
        // 重新加载记录数据
        this.queryList()
      }
    },
    // 完成处置任务
    complete() {
      // 1、判断是否有处置记录
      if (this.dealList && this.dealList.length <= 0) {
        this.$message.warning('请先点击处置保存一条处置记录')
        return
      }
      // 2、判断是否填写了处置意见
      if (!this.workRecord.record) {
        this.$message.warning('请填写意见')
        return
      }
      // 3、判断是否选择的不是待核实类型
      if (this.radioVal && this.Tp_crc_workValue.UNDO === this.radioVal) {
        this.$message.warning('请选择待核实以外的处置类型')
        return
      }
      this.$confirm({
        title: '提示',
        content: '是否确认预警任务处置完成？',
        onOk: async () => {
          // 如果选择了状态, 更新预警处置任务状态 (新了处理任务表状态, 同步更新预警信息表状态)
          if (this.radioVal && this.Tp_crc_workValue.UNDO !== this.radioVal) {
            const res1 = await updateWorktype(this.workid, this.workObj.warnid, this.radioVal)
            if (res1.code == 0) {
              const res2 = await complete(this.workid)
              if (res2.code == 0) {
                this.$message.success('操作成功')
                this.backRouter()
              }
            } else {
              this.$message.error('更新处置状态失败')
            }
          }
        },
      })
    },
    /**
     * 上传导入文件前验证文件类型
     */
    beforeUpload(file) {
      return new Promise((resolve, reject) => {
        // 文件格式是否为xls,xlsx
        const isAcceptType = file.name.toLowerCase().substr(file.name.lastIndexOf('.'))
        if (!(this.acceptFileType.indexOf(isAcceptType) > -1)) {
          this.$message.warning('请上传' + this.acceptFileType + '格式文件')
          return reject(false)
        }
        // 文件小于FILESIZE
        const isLtSize = file.size / 1024 / 1024 < FILESIZE
        if (!isLtSize) {
          this.$message.warning('请上传' + FILESIZE + 'MB以内的文件')
          return reject(false)
        }
        return resolve(false)
      })
    },
    /**
     * 上传附件,没有用到附件请删除
     */
    uploadFile(data) {
      console.log(data)
      minioUpload(data.file).then((res) => {
        console.log('res', res)
        if (res.code !== 0) {
          this.$message.error('上传图片失败')
        } else {
          this.$message.success('上传图片成功')
          const file = {
            uid: res.data.id,
            name: res.data.filename,
            status: 'done',
            url: res.data.url,
            flag: data.file.uid,
          }
          this.draggerFileList.push(file)
        }
      })
    },
    removeFile(file) {
      minioRemove({ fileid: file.uid }).then((res) => {
        console.log('res', res)
        if (res.code !== 0) {
          console.log('删除文件失败', res)
        } else {
          this.draggerFileList = this.draggerFileList.filter((el) => el.uid !== file.uid)
          console.log('删除文件成功')
        }
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.material_reivew {
  background: #f8fafd;

  &_top {
    display: flex;
    flex-direction: row;
    align-items: center;

    &_left {
      font-size: 24px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #2c2c2c;
      padding-left: 16px;
    }

    &_right {
      display: flex;
      align-items: center;
      margin-left: 109px;

      &_img {
        height: 24px;
        width: 24px;
      }

      &_text {
        margin-left: 10px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 800;
        text-decoration: underline;
        color: #0072c6;
      }
    }

    &_return {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: auto;
    }
  }
}
::v-deep .ant-page-header.has-breadcrumb {
  padding-top: 30px;
}

.steps {
  &-content {
    margin-top: 16px;
    border: 1px dashed #e9e9e9;
    border-radius: 6px;
    min-height: 200px;
    text-align: center;
    display: flex;

    &-left {
      width: 40%;
      min-height: 200px;
    }

    &-right {
      width: 60%;
      min-height: 200px;
    }
  }
}

.content_left {
  &_title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
    margin-top: 10px;
    height: 20px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #2c2c2c;
    line-height: 7px;
  }
  &_flow {
    padding: 24px 24px;
    max-height: 600px;
    overflow: auto;

    &_time {
      width: 100%;
      height: 16px;
      font-size: 16px;
      font-family: 'PingFang SC';
      font-weight: 500;
      color: #cbcbcb;
      display: flex;
      text-align: left;
      margin: 16px 16px;
    }

    &_content {
      width: 100%;
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #2c2c2c;
      line-height: 16px;
      display: flex;
      text-align: left;
      margin: 16px 16px;
    }

    &_fileDiv {
      width: 100%;
      min-height: 80px;
      background: #f8fafd;
      border-radius: 7px;
    }

    &_fileContent {
      display: flex;
    }

    &_fileLine {
      text-align: left;
      margin-left: 20px;
    }

    &_fileName {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      text-decoration: underline;
      color: #0072c6;
      line-height: 16px;
      margin-left: 20px;
    }
  }
  &_circle {
    width: 16px;
    height: 16px;
    background: #0072c6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0072c6;
    margin-top: 10px;
  }
}

// 重写面板样式
::v-deep .ant-collapse {
  border: 0px;
}
::v-deep .ant-collapse-content {
  border-top: 0px;
}
::v-deep .ant-collapse > .ant-collapse-item {
  border-bottom: 0px solid #d9d9d9;
}
::v-deep .ant-collapse > .ant-collapse-item > .ant-collapse-header {
  text-align: left;
  padding-left: 20px;
  font-size: 20px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #2c2c2c;
  line-height: 7px;
}
::v-deep .ant-collapse-content > .ant-collapse-content-box {
  padding: 0px;
}

::v-deep .ant-divider-horizontal {
  margin: 16px 0;
}

::v-deep .ant-table-tbody > tr > td {
  border: 0;
}
::v-deep .ant-table-thead > tr > th {
  font-size: 16px !important;
  color: #666666 !important;
  border: 0;
}
::v-deep .ant-radio-checked .ant-radio-inner {
  border-color: #03bf4b;
}
::v-deep .ant-radio-inner::after {
  border-color: #03bf4b;
}

.content_right {
  margin-left: 10px;
  &_title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 20px;
    margin-top: 10px;
    height: 20px;
    font-size: 20px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #2c2c2c;
    line-height: 7px;
  }

  &_warininfo {
    // border: 1px solid red;
    &_list {
      width: 100%;
      height: 50px;
      // border: 1px solid blue;
      display: flex;
      &_item {
        display: flex;
        // align-items: center;
        // border: 1px solid #ccc;
        img {
          width: 200px;
          height: 100px;
          margin-top: 0px;
        }
      }
      &_item:nth-child(odd) {
        width: 15%;
        height: 100%;

        justify-content: end;
      }
      &_item:nth-child(even) {
        width: 80%;
        height: 100%;
      }
    }
  }

  &_warn {
    display: flex;
    height: 18px;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #666666;
    line-height: 18px;
    margin-left: 20px;
  }
  &_warnType {
    height: 24px;
    width: 80px;
    background: #0072c6;
    border-radius: 14px;
    margin: 16px 36px;
  }
  &_warnTypeLabel {
    height: 16px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #fff;
  }

  &_textarea {
    background: rgb(247, 247, 247);
    border-radius: 7px;
    margin: 20px 10px;
    padding: 8px 16px;
  }

  &_option {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 800;
    margin-top: 10px;
    line-height: 7px;
    margin-left: 10px;
  }

  &_drag {
    width: 70%;
    margin: 16px 10px;
    padding: 10px 16px;
  }
}
::v-deep .ant-upload.ant-upload-drag {
  width: 70%;
  border-radius: 6px;
  margin-left: 10px;
}
::v-deep .ant-upload-list-item {
  width: 50%;
}
::v-deep .ant-upload-list-item-info {
  text-align: left;
}
</style>
